<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ taglib prefix ="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<%@ include file="/common/common-css.jsp" %>
		<%@ include file="discovery-css.jsp" %>
		<style>
		#jquery-table td{cursor:pointer !important}
		.load_bg{background:#000;opacity:0.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;}
		.load_img{left:50%;top:180px;position:fixed;height:50px;overflow:hidden;z-index:20000;}
		</style>
	</head>
<body class="no-skin">
	<div  class="load_bg" style="display:none;" ></div>
	<div class="page-content">		
			<ul class="nav nav-pills discovery-nav" role="tablist">
			<li role="presentation" class="active"><a href="./listBanner.action?bannerType=0">banner1</a></li>
			<li role="presentation" class="active"><a href="./listBanner.action?bannerType=2">banner2</a></li>
			<li role="presentation" class="active"><a href="#" onclick="cleanIndexRedisData(); return false;">清除首页缓存</a></li>
			</ul>
		<div class="page-content-area">
			
			<div class="row">
				<div class="col-xs-12 col-sm-12 widget-container-col">
					<div class="widget-box widget-color-blue">
						<!-- #section:custom/widget-box.options.collapsed -->
						<div class="widget-body">
							<div class="widget-main" >
								<div class="row">
									<div class="col-xs-8 col-md-8">
									    <table class="table table-bordered table-hover table-condensed table-responsive discovery-table" id="hours_price">
											<tr id="tabletit">
												<th>排序</th>
												<th>图片</th>
												<th>标题</th>
												<th>跳转</th>
												<th>上传时间</th>
												<th>操作</th>
											</tr>
											
											<s:iterator value="bannerVoList" var="obj"> 
                                              <tr tabindex="${obj.id}">
											    <td><i class="glyphicon glyphiconfir glyphicon-chevron-up"></i><br><i class="glyphicon glyphicon-chevron-down"></i></td>
												<td><img class="thisimg" id="thisimg${obj.id}" src="${obj.img}"/></td>
												<td><b id="thistitle${obj.id}">${obj.title}</b></td>
												<td><a id="thisurl${obj.id}" target="_blank" href="${obj.url}">${obj.url}</a></td>
												<td>${obj.createtime}</td>
												<td><a href="#edit" title="${obj.id}" data-toggle="modal" class="btn btn-primary edit" tabindex="${ctx}/discovery/banner/editBanner.action?id=${obj.id}">编辑</a><br><br>
												<a href="#delete" data-toggle="modal" tabindex="${ctx}/discovery/banner/deleteBanner.action?id=${obj.id}" class="btn btn-danger delete">删除</a></td>
											</tr>
                                            </s:iterator>
									    </table>	
									    <a href="#edit" id="newbt" title="${obj.id}" data-toggle="modal" class="btn btn-primary edit" tabindex="${ctx}/discovery/banner/addBanner.action">新增</a>
                                        
										
									</div>

									<div class="preview-banner">
									  <div id="slideBox" class="slideBox">
											<div id="slideBox-bd" class="bd">
											<ul>
											<s:iterator value="bannerVoList" var="obj"> 
                                             
												  <li>
													<a target="_blank" class="pic" href="${obj.listVo.url}"><img src="${obj.img}" /></a>
													<a target="_blank" class="tit" href="${obj.listVo.url}">${obj.title}</a>
												  </li>	
                                            </s:iterator>
												</ul>
											</div>

											<div class="hd">
												<ul></ul>
											</div>
										 </div>
										 <script type="text/javascript" src="http://img.xmiles.cn/js/TouchSlide.1.1.js"></script>
										 <script type="text/javascript">
											TouchSlide({ 
												slideCell:"#slideBox",
												titCell:".hd ul",
												mainCell:".bd ul", 
												effect:"leftLoop", 
												autoPage:true,
												autoPlay:true
											});
										</script>
									</div><!-- /.预览-->
									
								</div>
									
							</div><!-- /.widget-main -->
						</div><!-- /.widget-body -->
					</div><!-- /.widget-box -->
				</div><!-- /.col-sm-12 -->
			</div><!-- /.row -->

		</div><!-- /.page-content-area -->	
	</div><!-- /.page-content -->
	
	<!--点击编辑弹出框start-->
<div class="modal fade" id="edit" tabindex="1" role="dialog" 
   aria-labelledby="myModalLabel1" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
         </div>
         <form id="editform" method="post" enctype="multipart/form-data">
         <div class="modal-body">
		   <div class="edit-preview">
		     <img id="preimg" src="http://img.xmiles.cn/img/void.png"/>
			 <h3 id="edit-preview-h3">请输入标题</h3>
		   </div>
		   <div class="edit-body">
		   
		     <p><input id="bannerfile" class="form-control" type="file" name="banner" value="" title="上传图片"/></p>
			 <p><input class="form-control" id="title" type="text" name="bannerTitle" value="" placeholder="填写标题" title="填写标题"/></p>
			 <p><input class="form-control" id="url" type="text" name="previewurl" value="" placeholder="跳转url" title="跳转url"/></p>
			 <p>
			 	<input type="hidden" name="bannerType" value="${bannerType }"/>
			 </p>
		   </div>
         </div>
         <div class="modal-footer">
            <a class="btn btn-default" 
               data-dismiss="modal">取消
            </a>
            <button type="submit" class="btn btn-primary" id="submit-confirm">
               提交
            </button>
           
         </div>
          </form>
      </div><!-- /.modal-content -->
	</div>  
</div><!-- /.modal -->	



	<!--点击删除弹出框start-->
<div class="modal fade" id="delete" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
			<h4 class="modal-title" id="myModalLabel">
               确认删除？
            </h4>
         </div>
         <div class="modal-body">
           该banner会在APP和后台中消失
         </div>
         <div class="modal-footer">
            <a class="btn btn-default" 
               data-dismiss="modal">取消
            </a>
            <a type="submit" class="btn btn-primary" id="delete-confirm" >
               删除
            </a>
         </div>
      </div><!-- /.modal-content -->
	</div>
</div><!-- /.modal -->
<div class="alert alert-danger alert-dismissible discovery-alert discovery-up" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>注意!</strong> 第一条不能再上移了.
</div>
<div class="alert alert-danger alert-dismissible discovery-alert discovery-down" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>注意!</strong> 最后一条不能再下移了.
</div>
	
<%@ include file="/common/common-js.jsp" %>
<script>
  $(function(){
	$('.discovery-table').on('click','.delete',function(){
		var id=$(this).attr('tabindex');
		$('#delete-confirm').attr('href',id);
	})//点击删除
	$('.discovery-table').on('click','.edit',function(){
		var link=$(this).attr('tabindex');
		var id=$(this).attr('title');
		var imgsrc=$('#thisimg'+id).attr('src');
		var titleval=$('#thistitle'+id).text();
		var urlval=$('#thisurl'+id).text();
		$('#preimg').attr('src',imgsrc);
		$('#title').val(titleval);
		$('#edit-preview-h3').text(titleval);
		$('#url').val(urlval);
		$('#editform').attr('action',link);
	})//点击新建/编辑
	
	$('#newbt').on('click',function(){
		var link=$(this).attr('tabindex');
//		var id=$(this).attr('title');
//		var imgsrc=$('#thisimg'+id).attr('src');
//		var titleval=$('#thistitle'+id).text();
//		var urlval=$('#thisurl'+id).text();
//		$('#preimg').attr('src',imgsrc);
//		$('#title').val(titleval);
//		$('#edit-preview-h3').text(titleval);
//		$('#url').val(urlval);
		$('#editform').attr('action',link);
	})
	
		$('#bannerfile').change(function(){
		var file = this.files[0];
		var r = new FileReader();
		r.readAsDataURL(file);
		$(r).load(function(){
		$('#preimg').attr('src',this.result);
		});
	});
	
	$('#title').bind('input propertychange', function() {
		$('#edit-preview-h3').text($('#title').val());
	});//编辑实时显示输入
	$('#title-build').bind('input propertychange', function() {
		$('#build-preview-h3').text($('#title-build').val());
	});//新建实时显示输入
	

	//$('.discovery-table tr').not('#tabletit').each(function(){
	//	$(this).attr('tabindex',$(this).index());
	//});//为每个输出的tr赋序号	
	$('.discovery-table').on('click','.glyphicon-chevron-up',function(){
		var arr = new Array();
		var thispos=$(this).parent('td').parent('tr');
		var thishtml=thispos.clone();
		var prevpos=$(this).parent('td').parent('tr').prev();
		if(prevpos.is('#tabletit')){
			$('.discovery-up').show();
			setTimeout("$('.discovery-up').hide()",3000);
		}else{
			thispos.remove();
			prevpos.before(thishtml);
			$('.discovery-table tr').not('#tabletit').each(function(){
				arr.push($(this).attr('tabindex'));
			});
			window.location.href = ctx + "/discovery/banner/updateArray.action?array=" + arr;
		}
	})//上移
	$('.discovery-table').on('click','.glyphicon-chevron-down',function(){
		var arr = new Array();
		var thispos=$(this).parent('td').parent('tr');
		var thishtml=thispos.clone();
		var nextpos=$(this).parent('td').parent('tr').next();
		if(thispos.index()==$(".discovery-table tr").length - 1){
			$('.discovery-down').show();
			setTimeout("$('.discovery-down').hide()",3000);
		}else{
			thispos.remove();
			nextpos.after(thishtml);
			$('.discovery-table tr').not('#tabletit').each(function(){
				arr.push($(this).attr('tabindex'));
			});
			window.location.href = ctx + "/discovery/banner/updateArray.action?array=" + arr;
			
		}
	})//下移

}); 

</script>

</body>
</html>
